<template>
  <div class="type_container bg_fff">
    <div class="fl vc">
      <div class="w70 color_999 dx_13">选择剧本</div>
      <div class="fl vc script_wrap" @click="show = true">
        <img src="@/assets/images/icon_script.png" class="img16" />
        <span class="ct dx_14 ml8 mr8">{{ scriptName }}</span>
        <img src="@/assets/images/icon_down.png" class="img16" />
      </div>
    </div>
    <div class="fl vc mt16" v-if="types == 'date'">
      <div class="w70 color_999 dx_13">统计维度</div>
      <div class="fl vc">
        <div class="date_item flvcc" :class="dateType == 0 ? 'bg_d1 ct' : 'bg_f6'" @click="checkDate(0)">按天</div>
        <div class="date_item flvcc" :class="dateType == 2 ? 'bg_d1 ct' : 'bg_f6'" @click="checkDate(2)">按月</div>
        <div class="date_item flvcc" :class="dateType == 1 ? 'bg_d1 ct' : 'bg_f6'" @click="checkDate(1)">按年</div>
      </div>
    </div>
    <div class="fl vc mt16" v-if="types == 'statistics'">
      <div class="w70 color_999 dx_13">统计类型</div>
      <div class="fl vc">
        <div class="date_item w80 flvcc" :class="statisticsType == 1 ? 'bg_d1 ct' : 'bg_f6'" @click="checkStatisticsType(1)">激活统计</div>
        <div class="date_item w80 flvcc" :class="statisticsType == 2 ? 'bg_d1 ct' : 'bg_f6'" @click="checkStatisticsType(2)">开本统计</div>
      </div>
    </div>
    <van-popup v-model="show" get-container="body" position="bottom">
      <van-picker :columns="scriptList" show-toolbar :value-key="$attrs.value" :title="$attrs.text" @cancel="show = !show" @confirm="onConfirm"></van-picker>
    </van-popup>
  </div>
</template>

<script>
import { Picker } from 'vant';
import { getScriptList } from '@/api/chart.js'
export default {
  components: {
    [Picker.name]: Picker,
  },

  props: {
    scriptList: {
      type: [Object, Array],
      default: () => [],
    },
    types: {
      type: String,
      default: 'date',
    }
  },
  data() {
    return {
      scriptName: '所有剧本',
      show: false,

      scriptValue: 0,

      dateType: 0,

      statisticsType: 1
    };
  },

  created () {
    // this.getScriptList()
  },

  methods: {
    onConfirm(obj) {
      this.show = false
      this.scriptName = obj.text
      if (this.scriptValue != obj.value) {
        this.scriptValue = obj.value
        this.$emit('changeScript', obj.value, this.scriptName)
      }
    },

    checkDate(val) {
      if (this.dateType != val) {
        this.dateType = val
        this.$emit('changeDate', this.dateType)
      }
    },

    checkStatisticsType(val) {
      if (this.statisticsType != val) {
        this.statisticsType = val
        this.$emit('changeStatisticsType', this.statisticsType)
      }
    },

    // 获取剧本列表
    async getScriptList () {
      try {
        const params = {
          request: {
            dto: {}
          }
        }
        const res = await getScriptList(params)
        console.log('剧本列表', res)
        if (res.errorCode === 0) {
          this.scriptList = res.response.map(item => {
            return {
              text: item.title,
              value: item.id
            }
          })
          this.scriptList.unshift({
            text: '所有剧本',
            value: ''
          })
          // this.statisticsData = res.response
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
.type_container {
  padding: 18px 12px;
}
.script_wrap {
  background: #D1FB71;
  border-radius: 20px;
  height: 36px;
  padding: 0 12px;
}
.date_item {
  width: 60px;
  height: 36px;
  border-radius: 27px;
  font-size: 14px;
  margin-right: 12px;
  transition: all .2s;
  // font-weight: bold;
}
</style>
